<template>
    <view>
        <view class="top"></view>
        <view class="banner mb-28" v-if="list.length > 0">
            <swiper
                class="swiper br-24 over-hide"
                :autoplay="true"
                :duration="600"
                :interval="4500"
                :circular="true"
            >
                <swiper-item v-for="item in list" :key="item.id">
                    <view class="big br-24 over-hide" @click="handleClick">
                        <hj-image
                            :img="item.imageUrl"
                            height="100%"
                            width="100%"
                            mode="aspectFill"
                        />
                    </view>
                </swiper-item>
            </swiper>
            <view class="total center pl-16 pr-16">
                <hj-image src="album-01.png" height="20rpx" width="20rpx" mode="aspectFit" />
                <text class="t-w ft-24 ml-8">{{ total }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 首页相册展示
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'Banner'
})
defineProps({
    list: {
        type: Array,
        default: () => []
    },
    total: {
        type: Number,
        default: 0
    }
})

// 点击跳转相册列表
const handleClick = () => {
    uni.navigateTo({
        url: '/pages/hotel/hotel-album/index'
    })
}
</script>

<style scoped lang="scss">
.top {
    height: 30rpx;
}
.banner {
    width: 100%;
    position: relative;
    .swiper {
        height: 380rpx;
    }
    .total {
        width: auto;
        height: 40rpx;
        border-radius: 20rpx;
        background: rgba($color: #000000, $alpha: 0.5);
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        z-index: 9;
    }
}
</style>
